<template>
  <Echarts
    id="echarts"
    height="500px"
    :full-options="echartsOptions"
    :loading="loading"
  >
  </Echarts>
</template>
 
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import * as echarts from "echarts";
// 引进Echarts 组件
import Echarts from "@/components/Echarts/Echarts.vue";
// 引进Echarts 的options配置文件，可根据项目模块来创建该配置文件
// import chartOption from "../../components/Echarts/options";
const loading = ref(false); // 初始值可以根据实际情况设定
const echartsOptions = reactive({
  options: {},
  init: false,
});
// 此处可请求接口来获取数据
// 我的options配置使用的是dataset的形式，传进options中的两个参数data（图表的数据）和dimension（图表的维度），
onMounted(() => {
  const testData = [
    { value: 26, name: "家用电器" },
    { value: 27, name: "户外运动" },
    { value: 24, name: "汽车用品" },
    { value: 23, name: "手机数码" },
  ];
  const testDimensions = ["name", "value"];
  // echartsOptions.options = chartOption.testOption(testData, testDimensions);
  echartsOptions.options = {
    tooltip: {},
    color: ["#FFAE00", "#2AADD3", "#20C3A7"],
    animation: false,
    grid: {
      top: "23%",
      bottom: "21%", //也可设置left和right设置距离来控制图表的大小
      left: "11%",
      right: "5%",
    },
    xAxis: {
      data: ["周一", "周二"],
      axisLine: {
        show: true, //隐藏X轴轴线
        lineStyle: {
          color: "rgba(10,71,62,0.2)",
        },
      },
      axisTick: {
        show: false, //隐藏X轴刻度
      },
      axisLabel: {
        show: true,
        margin: 14,
        fontSize: 14,

        color: "rgba(0,0,0,1)", //X轴文字颜色
      },
    },
    yAxis: [
      {
        type: "value",
        gridIndex: 0,
        // min: min1,
        // max: max1,
        // interval: (max1 - min1) / 4,
        splitNumber: 4,
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(233,242,241,1)",
            width: 1,
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(233,242,241,1)",
          },
        },
        axisLabel: {
          show: true,
          margin: 14,
          fontSize: 14,

          color: "#333", //X轴文字颜色
        },
      },
    ],
    legend: {
      top: "0%",
      itemWidth: 10,
      itemHeight: 10,
      data: ["核查测点数", "严重越上限测点数", "越下限测点数"],
    },
    series: [
      {
        name: "越下限测点数",
        type: "bar",
        barWidth: 8,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(29,218,182,1)",
            },
            {
              offset: 1,
              color: "rgba(34,183,160,1)",
            },
          ]),
        },
        data: [1, 2],
        // z: 10,
        // zlevel: 0,
      },
      {
        name: "严重越上限测点数",
        type: "bar",
        barWidth: 8,
        // barGap: '-100%',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(31,224,247,1)",
            },
            {
              offset: 1,
              color: "rgba(42,173,211,1)",
            },
          ]),
        },
        data: [1, 2],
        // z: 11,
        // zlevel: 1,
      },

      {
        name: "核查测点数",
        type: "bar",
        barWidth: 8,
        // smooth: true, //是否平滑曲线显示
        // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆

        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(255,222,0,1)",
            },
            {
              offset: 1,
              color: "rgba(255,174,0,1)",
            },
          ]),
        },
        // z: 12,
        // zlevel: 2,

        data: [2, 3],
      },
    ],
  };
});
</script>